import { useState } from 'react'
import { Button } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import './index.less'

const Header = () => {
  const { t, i18n } = useTranslation(['webGames'])

  const [language, setLanguage] = useState('zh-CN')
  const [showChinese, setShowChinese] = useState(language == 'zh-CN')

  const switchLanguage = () => {
    if (showChinese) {
      setShowChinese(false)
      setLanguage('en-US')
      i18n.changeLanguage('en-US')
    } else {
      setShowChinese(true)
      setLanguage('zh-CN')
      i18n.changeLanguage('zh-CN')
    }
  }

  return <div className='web-game-header'>
    <Button className={'lang-switch'} onClick={switchLanguage}>{showChinese ? t('practice.switchEnglish') : t('practice.switchChinese')}</Button>
  </div>
}

export default Header